<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-itab</title>
<link href="../jsease.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../core.js"></script>
<script type="text/javascript" src="../itab.js"></script>
<style type="text/css">
.itab
    {
    border:0;
    }
    .itab .bar
        {
        list-style:none;
        margin:0 auto;
        text-align:center;
        height:27px;
        width:100%;
        border-bottom:1px solid #ccc;
        background:url("/icos/inavbg28.gif") repeat-x;
        }
        .itab .bar .item
            {
            float:left;
            margin:0 0 0 5px;
            line-height:28px;
            height:28px;
            }
        .itab .bar .rtl
            {
            float:right;
            margin:0 5px 0 0;
            }
            .itab .bar .item a.act,
            .itab .bar .item a.pnd
                {
                float:left;
                outline:0;
                text-decoration:none;
                }
                .itab .bar .item a.pnd .cap,
                .itab .bar .item a.act .cap
                    {
                    display:block;
                    float:left;
                    padding:0 5px;
                    margin:5px 0 0;
                    height:21px;
                    line-height:21px;
                    background:#e9effe;
                    border:1px solid #ccc;
                    -moz-border-radius: 10px 10px 0 0;
                    -khtml-border-radius: 10px 10px 0 0;
                    -webkit-border-radius: 10px 10px 0 0;
                    border-radius: 10px 10px 0 0;
                    }
                .itab .bar .item a.act .cap
                    {
                    margin:2px 0 0 0;
                    height:25px;
                    line-height:20px;
                    background:#f9f9f9;
                    border-bottom:0;
                    cursor:default;
                    }
                    .itab .bar .item a.act .cap .ico,
                    .itab .bar .item a.pnd .cap .ico
                        {
                        float:left;
                        margin:4px 3px;
                        }
                    .itab .bar .item a.pnd .cap .ico
                        {
                        margin:3px;
                        }
                    .itab .bar .item a.act .cap .txt,
                    .itab .bar .item a.pnd .cap .txt
                        {
                        float:left;
                        margin:3px 4px;
                        color:#801204;
                        border-bottom:3px double #801204;
                        line-height:16px;
                        }
                    .itab .bar .item a.pnd .cap .txt
                        {
                        margin:2px 4px;
                        border-bottom:1px solid blue;
                        color:blue;
                        }
                    .itab .bar .item a.act .cap .iclose,
                    .itab .bar .item a.pnd .cap .iclose
                        {
                        display:block;
                        float:left;
                        padding:0;
                        margin:4px 1px 0 8px;
                        height:16px;
                        width:16px;
                        cursor:default;
                        }
                    .itab .bar .item a.pnd .cap .iclose
                        {
                        margin:3px 1px 0 8px;
                        }

                .itab .bar .item a:hover.pnd .cap
                    {
                    background:#f9f9f9;
                    }
                    .itab .bar .item a:hover.pnd .cap .txt
                        {
                        border-bottom:1px solid blue;
                        color:#801204;
                        }

    .itab .off
        {
        display:none;
        }
    .itab .on
        {
        display:block;
        }
</style>
</head>

<body>
<div id="tabs"></div>
<div id="targ"></div>
<div class="tab" style="height: 32px; top: 120px;" id="myztab">
    <div class="bx">
        <div class="xl">
            <div class="ly" id="tabsyset"><a class="bz" href="#tsyset"><img src="/icos/cog_edit.png" class="ico" alt=""><span id="tsyset_label" class="t">系统设置</a></div>
            <div class="ly" id="tabxsplit"><a class="az" href="#xsplit"><img src="/icos/page_edit.png" class="ico" alt=""><span id="xsplit_label" class="t">产品设置</span></a></div>
            <div class="ly" id="tabxtabs"><a class="bz" href="#xtabs"><img src="/icos/user_edit.png" class="ico" alt=""><span id="xtabs_label" class="t">用户设置</span></a></div>
            <div class="ry xy" id="tabac">
                <div id="tabac_div">
                    <div class="ac" id="acctrl">
                        <div id="acnav" class="mnbar">
                            <div class="xmn lfl" id="acnav_lroot">
                                <div class="itm" id="uacc" style="margin-left: 3px;"><a id="uacc_a_" href="#uacc"><img src="/icos/user.png" alt="" class="ico"><span class="tx">admin</span></a></div>
                                <div class="z" id="_z__itm__828887758312.2692"></div>
                                <div class="itm" id="aclogout" style="margin-right: 3px;"><a id="aclogout_a_" href="#aclogout"><img src="/icos/door_in.png" alt="" class="ico"><span class="tx">登出</span></a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line"></div>
    </div>
</div>
<div class="itab">
     <dl class="bar">
        <dd class="item"><a class="act" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">系统设置</span></div></a></dd>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/user.png" class="ico" alt="" /><span class="txt">用户/顾客</span></div></a></dd>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">产品管理</span></div></a></dd>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">店/工作室</span></div></a></dd>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">销售/业绩</span></div></a></dd>
        <dd class="item rtl">{{ userinfo }}</dd>
    </dl>
</div>
<script type="text/javascript">
//<![CDATA[
var res = {
		tabs : {
			tabs: { id: 'xtabs', tab: { label:'系统设置' }, locked:1, ico: {src: '/icos/tab.png'}, data:$('myztab') },
			split: { id: 'xsplit', tab: { label:'split' }, locked:1, ico: {src: '/icos/application_side_tree.png'} },
			slide: { id: 'xslide', tab: { label:'用户/顾客' }, locked:1, ico: {src: '/icos/timeline_marker.png'} },
			mask: { id: 'xmask', tab: { label:'mask' }, ico: {src: '/icos/shading.png'} }
		}
	};

def('mytab', 'itab', { id: 'mytab', elem: 'tabs', target:'targ', css: {height: 32}, tabs: res.tabs });

//]]>
</script>

</body>
</html>